تركيب خطافات React المخصصة: إتقان تجريد المنطق المعقد

تعد خطافات React المخصصة أداة قوية لتغليف وإعادة استخدام المنطق ذي الحالة (stateful logic) داخل تطبيقات React الخاصة بك. ومع ذلك، كلما زادت تطبيقاتك تعقيدًا، زاد المنطق داخل خطافاتك المخصصة. يمكن أن يؤدي هذا إلى خطافات ضخمة يصعب فهمها واختبارها وصيانتها. يوفر تركيب الخطافات المخصصة حلاً لهذه المشكلة عن طريق السماح لك بتقسيم المنطق المعقد إلى خطافات أصغر وأكثر قابلية للإدارة وإعادة الاستخدام.

ما هو تركيب الخطافات المخصصة؟

تركيب الخطافات المخصصة هو ممارسة دمج عدة خطافات مخصصة صغيرة لإنشاء وظائف أكثر تعقيدًا. بدلاً من إنشاء خطاف واحد كبير يتعامل مع كل شيء، تقوم بإنشاء عدة خطافات أصغر، كل منها مسؤول عن جانب معين من المنطق. يمكن بعد ذلك تركيب هذه الخطافات الأصغر معًا لتحقيق الوظيفة المطلوبة.

فكر في الأمر وكأنه بناء باستخدام مكعبات الليغو. كل مكعب (خطاف صغير) له وظيفة محددة، وأنت تجمعها بطرق مختلفة لبناء هياكل معقدة (ميزات أكبر).

فوائد تركيب الخطافات المخصصة

• تحسين إعادة استخدام الكود: الخطافات الأصغر والأكثر تركيزًا هي بطبيعتها أكثر قابلية لإعادة الاستخدام عبر مكونات مختلفة وحتى مشاريع مختلفة.
• تعزيز قابلية الصيانة: تقسيم المنطق المعقد إلى وحدات أصغر ومستقلة يجعل من السهل فهم وتصحيح وتعديل الكود الخاص بك. التغييرات في خطاف واحد أقل احتمالًا أن تؤثر على أجزاء أخرى من تطبيقك.
• زيادة قابلية الاختبار: الخطافات الأصغر أسهل في الاختبار بشكل منفصل، مما يؤدي إلى كود أكثر قوة وموثوقية.
• تنظيم أفضل للكود: يشجع التركيب على وجود قاعدة كود أكثر نمطية وتنظيمًا، مما يسهل التنقل وفهم العلاقات بين الأجزاء المختلفة من تطبيقك.
• تقليل تكرار الكود: من خلال استخلاص المنطق المشترك في خطافات قابلة لإعادة الاستخدام، فإنك تقلل من تكرار الكود، مما يؤدي إلى قاعدة كود أكثر إيجازًا وقابلية للصيانة.

متى تستخدم تركيب الخطافات المخصصة؟

يجب أن تفكر في استخدام تركيب الخطافات المخصصة عندما:

• يصبح خطاف مخصص واحد كبيرًا جدًا ومعقدًا.
• تجد نفسك تكرر منطقًا مشابهًا في عدة خطافات مخصصة أو مكونات.
• تريد تحسين قابلية اختبار خطافاتك المخصصة.
• تريد إنشاء قاعدة كود أكثر نمطية وقابلة لإعادة الاستخدام.

المبادئ الأساسية لتركيب الخطافات المخصصة

إليك بعض المبادئ الأساسية لتوجيه نهجك في تركيب الخطافات المخصصة:

• مبدأ المسؤولية الواحدة: يجب أن يكون لكل خطاف مخصص مسؤولية واحدة محددة جيدًا. هذا يجعلها أسهل في الفهم والاختبار وإعادة الاستخدام.
• فصل الاهتمامات: افصل الجوانب المختلفة من منطقك في خطافات مختلفة. على سبيل المثال، قد يكون لديك خطاف لجلب البيانات، وآخر لإدارة الحالة، وآخر للتعامل مع الآثار الجانبية.
• قابلية التركيب: صمم خطافاتك بحيث يمكن تركيبها بسهولة مع خطافات أخرى. غالبًا ما يتضمن هذا إرجاع بيانات أو دوال يمكن استخدامها بواسطة خطافات أخرى.
• اصطلاحات التسمية: استخدم أسماء واضحة ووصفية لخطافاتك للإشارة إلى غرضها ووظيفتها. من الاصطلاحات الشائعة استخدام البادئة `use` لأسماء الخطافات.

أنماط التركيب الشائعة

يمكن استخدام عدة أنماط لتركيب الخطافات المخصصة. إليك بعض من أكثرها شيوعًا:

1. تركيب الخطافات البسيط

هذا هو أبسط أشكال التركيب، حيث يقوم خطاف واحد ببساطة باستدعاء خطاف آخر ويستخدم قيمته المرتجعة.

مثال: تخيل أن لديك خطافًا لجلب بيانات المستخدم وآخر لتنسيق التواريخ. يمكنك تركيب هذه الخطافات لإنشاء خطاف جديد يجلب بيانات المستخدم وينسق تاريخ تسجيل المستخدم.

            
import { useState, useEffect } from 'react';

function useUserData(userId) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [userId]);

  return { data, loading, error };
}

function useFormattedDate(dateString) {
  try {
    const date = new Date(dateString);
    const formattedDate = date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' });
    return formattedDate;
  } catch (error) {
    console.error("Error formatting date:", error);
    return "Invalid Date";
  }
}

function useUserWithFormattedDate(userId) {
  const { data, loading, error } = useUserData(userId);
  const formattedRegistrationDate = data ? useFormattedDate(data.registrationDate) : null;

  return { ...data, formattedRegistrationDate, loading, error };
}

export default useUserWithFormattedDate;

            

              
                Copy
              
            
          

الشرح:

• useUserData يجلب بيانات المستخدم من واجهة برمجة التطبيقات (API).
• useFormattedDate ينسق سلسلة تاريخ إلى تنسيق سهل الاستخدام. يتعامل مع أخطاء تحليل التاريخ المحتملة برشاقة. الوسيط undefined في toLocaleDateString يستخدم الإعدادات المحلية للمستخدم للتنسيق.
• useUserWithFormattedDate يركب كلا الخطافين. أولاً، يستخدم useUserData لجلب بيانات المستخدم. ثم، إذا كانت البيانات متاحة، فإنه يستخدم useFormattedDate لتنسيق registrationDate. أخيرًا، يعيد بيانات المستخدم الأصلية مع التاريخ المنسق وحالة التحميل وأي أخطاء محتملة.

2. تركيب الخطافات مع حالة مشتركة

في هذا النمط، تشارك عدة خطافات وتعدل نفس الحالة. يمكن تحقيق ذلك باستخدام useContext أو عن طريق تمرير الحالة ودوال التعيين (setter functions) بين الخطافات.

مثال: تخيل بناء نموذج متعدد الخطوات. يمكن أن يكون لكل خطوة خطافها الخاص لإدارة حقول الإدخال ومنطق التحقق من الصحة الخاص بالخطوة، لكنها جميعًا تشترك في حالة نموذج مشتركة تتم إدارتها بواسطة خطاف رئيسي باستخدام useReducer و useContext.

            
import React, { createContext, useContext, useReducer } from 'react';

// Define the initial state
const initialState = {
  step: 1,
  name: '',
  email: '',
  address: ''
};

// Define the actions
const ACTIONS = {
  NEXT_STEP: 'NEXT_STEP',
  PREVIOUS_STEP: 'PREVIOUS_STEP',
  UPDATE_FIELD: 'UPDATE_FIELD'
};

// Create the reducer
function formReducer(state, action) {
  switch (action.type) {
    case ACTIONS.NEXT_STEP:
      return { ...state, step: state.step + 1 };
    case ACTIONS.PREVIOUS_STEP:
      return { ...state, step: state.step - 1 };
    case ACTIONS.UPDATE_FIELD:
      return { ...state, [action.payload.field]: action.payload.value };
    default:
      return state;
  }
}

// Create the context
const FormContext = createContext();

// Create a provider component
function FormProvider({ children }) {
  const [state, dispatch] = useReducer(formReducer, initialState);

  const value = {
    state,
    dispatch,
    nextStep: () => dispatch({ type: ACTIONS.NEXT_STEP }),
    previousStep: () => dispatch({ type: ACTIONS.PREVIOUS_STEP }),
    updateField: (field, value) => dispatch({ type: ACTIONS.UPDATE_FIELD, payload: { field, value } })
  };

  return (
    
      {children}
    
  );
}

// Custom hook for accessing the form context
function useFormContext() {
  const context = useContext(FormContext);
  if (!context) {
    throw new Error('useFormContext must be used within a FormProvider');
  }
  return context;
}

// Custom hook for Step 1
function useStep1() {
  const { state, updateField } = useFormContext();

  const updateName = (value) => updateField('name', value);

  return {
    name: state.name,
    updateName
  };
}

// Custom hook for Step 2
function useStep2() {
  const { state, updateField } = useFormContext();

  const updateEmail = (value) => updateField('email', value);

  return {
    email: state.email,
    updateEmail
  };
}

// Custom hook for Step 3
function useStep3() {
  const { state, updateField } = useFormContext();

  const updateAddress = (value) => updateField('address', value);

  return {
    address: state.address,
    updateAddress
  };
}

export { FormProvider, useFormContext, useStep1, useStep2, useStep3 };

            

              
                Copy
              
            
          

الشرح:

• يتم إنشاء FormContext باستخدام createContext للاحتفاظ بحالة النموذج ودالة الإرسال (dispatch).
• يدير formReducer تحديثات حالة النموذج باستخدام useReducer. يتم تعريف إجراءات مثل NEXT_STEP و PREVIOUS_STEP و UPDATE_FIELD لتعديل الحالة.
• يوفر مكون FormProvider سياق النموذج لأطفاله، مما يجعل الحالة ودالة الإرسال متاحة لجميع خطوات النموذج. كما أنه يعرض دوال مساعدة لـ `nextStep` و `previousStep` و `updateField` لتبسيط إرسال الإجراءات.
• يسمح الخطاف useFormContext للمكونات بالوصول إلى قيم سياق النموذج.
• كل خطوة (useStep1، useStep2، useStep3) تنشئ خطافها الخاص لإدارة المدخلات المتعلقة بخطوتها وتستخدم useFormContext للحصول على الحالة ودالة الإرسال لتحديثها. تعرض كل خطوة فقط البيانات والدوال ذات الصلة بتلك الخطوة، ملتزمة بمبدأ المسؤولية الواحدة.

3. تركيب الخطافات مع إدارة دورة الحياة

يتضمن هذا النمط خطافات تدير مراحل مختلفة من دورة حياة المكون، مثل التحميل (mounting)، والتحديث (updating)، والإزالة (unmounting). يتم تحقيق ذلك غالبًا باستخدام useEffect داخل الخطافات المركبة.

مثال: فكر في مكون يحتاج إلى تتبع حالة الاتصال بالإنترنت (online/offline) ويحتاج أيضًا إلى إجراء بعض عمليات التنظيف عند إزالته. يمكنك إنشاء خطافات منفصلة لكل من هذه المهام ثم تركيبها.

            
import { useState, useEffect } from 'react';

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }

    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;

    return () => {
      document.title = 'Original Title'; // Revert to a default title on unmount
    };
  }, [title]);
}

function useAppLifecycle(title) {
  const isOnline = useOnlineStatus();
  useDocumentTitle(title);

  return isOnline; // Return the online status
}

export { useAppLifecycle, useOnlineStatus, useDocumentTitle };

            

              
                Copy
              
            
          

الشرح:

• useOnlineStatus يتتبع حالة اتصال المستخدم بالإنترنت باستخدام أحداث online و offline. يقوم الخطاف useEffect بإعداد مستمعي الأحداث عند تحميل المكون وتنظيفها عند إزالته.
• useDocumentTitle يقوم بتحديث عنوان المستند. كما يعيد العنوان إلى قيمة افتراضية عند إزالة المكون، مما يضمن عدم وجود مشاكل عناوين عالقة.
• useAppLifecycle يركب كلا الخطافين. يستخدم useOnlineStatus لتحديد ما إذا كان المستخدم متصلاً بالإنترنت و useDocumentTitle لتعيين عنوان المستند. يعيد الخطاف المجمع حالة الاتصال بالإنترنت.

أمثلة عملية وحالات استخدام

1. التدويل (i18n)

يمكن أن تصبح إدارة الترجمات والتبديل بين اللغات المحلية معقدة. يمكنك استخدام تركيب الخطافات لفصل الاهتمامات:

• useLocale(): يدير اللغة المحلية الحالية.
• useTranslations(): يجلب ويوفر الترجمات للغة المحلية الحالية.
• useTranslate(key): خطاف يأخذ مفتاح ترجمة ويعيد السلسلة المترجمة، باستخدام الخطاف useTranslations للوصول إلى الترجمات.

يتيح لك هذا التبديل بسهولة بين اللغات المحلية والوصول إلى الترجمات في جميع أنحاء تطبيقك. فكر في استخدام مكتبات مثل i18next جنبًا إلى جنب مع الخطافات المخصصة لإدارة منطق الترجمة. على سبيل المثال، يمكن لـ useTranslations تحميل الترجمات بناءً على اللغة المحلية المحددة من ملفات JSON بلغات مختلفة.

2. التحقق من صحة النماذج

غالبًا ما تتطلب النماذج المعقدة تحققًا واسع النطاق من الصحة. يمكنك استخدام تركيب الخطافات لإنشاء منطق تحقق قابل لإعادة الاستخدام:

• useInput(initialValue): يدير حالة حقل إدخال واحد.
• useValidator(value, rules): يتحقق من صحة حقل إدخال واحد بناءً على مجموعة من القواعد (مثل، مطلوب، بريد إلكتروني، الحد الأدنى للطول).
• useForm(fields): يدير حالة والتحقق من صحة النموذج بأكمله، مركبًا useInput و useValidator لكل حقل.

يعزز هذا النهج إعادة استخدام الكود ويسهل إضافة أو تعديل قواعد التحقق. توفر مكتبات مثل Formik أو React Hook Form حلولًا مسبقة الصنع ولكن يمكن تعزيزها بخطافات مخصصة لاحتياجات التحقق المحددة.

3. جلب البيانات والتخزين المؤقت

يمكن تبسيط إدارة جلب البيانات والتخزين المؤقت ومعالجة الأخطاء باستخدام تركيب الخطافات:

• useFetch(url): يجلب البيانات من عنوان URL معين.
• useCache(key, fetchFunction): يخزن نتيجة دالة جلب مؤقتًا باستخدام مفتاح.
• useData(url, options): يجمع بين useFetch و useCache لجلب البيانات وتخزين النتائج مؤقتًا.

يتيح لك هذا تخزين البيانات التي يتم الوصول إليها بشكل متكرر مؤقتًا وتحسين الأداء. توفر مكتبات مثل SWR (Stale-While-Revalidate) و React Query حلولًا قوية لجلب البيانات والتخزين المؤقت يمكن توسيعها باستخدام خطافات مخصصة.

4. المصادقة

يمكن أن تكون معالجة منطق المصادقة معقدة، خاصة عند التعامل مع طرق مصادقة مختلفة (مثل JWT، OAuth). يمكن أن يساعد تركيب الخطافات في فصل الجوانب المختلفة لعملية المصادقة:

• useAuthToken(): يدير رمز المصادقة (على سبيل المثال، تخزينه واسترجاعه من التخزين المحلي).
• useUser(): يجلب ويوفر معلومات المستخدم الحالي بناءً على رمز المصادقة.
• useAuth(): يوفر وظائف متعلقة بالمصادقة مثل تسجيل الدخول وتسجيل الخروج والاشتراك، مركبًا الخطافات الأخرى.

يتيح لك هذا النهج التبديل بسهولة بين طرق المصادقة المختلفة أو إضافة ميزات جديدة إلى عملية المصادقة. يمكن استخدام مكتبات مثل Auth0 و Firebase Authentication كواجهة خلفية لإدارة حسابات المستخدمين والمصادقة، ويمكن إنشاء خطافات مخصصة للتفاعل مع هذه الخدمات.

أفضل الممارسات لتركيب الخطافات المخصصة

• حافظ على تركيز الخطافات: يجب أن يكون لكل خطاف غرض واضح ومحدد.
• تجنب التداخل العميق: حدد عدد مستويات التركيب لتجنب جعل الكود صعب الفهم. إذا أصبح الخطاف معقدًا للغاية، ففكر في تقسيمه أكثر.
• وثّق خطافاتك: قدم وثائق واضحة وموجزة لكل خطاف، تشرح غرضه ومدخلاته ومخرجاته. هذا مهم بشكل خاص للخطافات التي يستخدمها مطورون آخرون.
• اختبر خطافاتك: اكتب اختبارات وحدة لكل خطاف للتأكد من أنه يعمل بشكل صحيح. هذا مهم بشكل خاص للخطافات التي تدير الحالة أو تؤدي آثارًا جانبية.
• فكر في استخدام مكتبة إدارة حالة: لسيناريوهات إدارة الحالة المعقدة، فكر في استخدام مكتبة مثل Redux أو Zustand أو Jotai. توفر هذه المكتبات ميزات أكثر تقدمًا لإدارة الحالة ويمكن أن تبسط تركيب الخطافات.
• فكر في معالجة الأخطاء: طبق معالجة قوية للأخطاء في خطافاتك لمنع السلوك غير المتوقع. فكر في استخدام كتل try-catch لالتقاط الأخطاء وتوفير رسائل خطأ مفيدة.
• ضع الأداء في الاعتبار: كن واعيًا بالآثار المترتبة على أداء خطافاتك. تجنب إعادة العرض غير الضرورية وقم بتحسين الكود الخاص بك من أجل الأداء. استخدم React.memo و useMemo و useCallback لتحسين الأداء عند الاقتضاء.

الخلاصة

يعد تركيب خطافات React المخصصة تقنية قوية لتجريد المنطق المعقد وتحسين إعادة استخدام الكود وقابلية الصيانة والاختبار. من خلال تقسيم المهام المعقدة إلى خطافات أصغر وأكثر قابلية للإدارة، يمكنك إنشاء قاعدة كود أكثر نمطية وتنظيمًا. باتباع أفضل الممارسات الموضحة في هذه المقالة، يمكنك الاستفادة بشكل فعال من تركيب الخطافات المخصصة لبناء تطبيقات React قوية وقابلة للتطوير. تذكر دائمًا إعطاء الأولوية للوضوح والبساطة في الكود الخاص بك، ولا تخف من تجربة أنماط تركيب مختلفة للعثور على أفضل ما يناسب احتياجاتك الخاصة.